<script setup>
import { ref } from "vue";
import { fromData1 } from "@/api/index.js";
import Number from "@/components/Number.vue";
import NavList from "@/components/NavList.vue";
import Echarts from "@/components/Echarts.vue";
import Card from "@/components/Card.vue";
import { fromData2 } from "@/api/index.js";

const data1 = ref([]);
fromData1().then(response => {
  data1.value = response.panels;
});

const panels = ref([]);
const goods = ref([]);

fromData2().then(result => {
  goods.value = result.goods;
  panels.value = result.order;
});
</script>

<template>
  <!-- 骨架屏 -->
  <div class="flex-container" v-if="data1.length === 0">
    <div class="flex-item" v-for="item in data1" :key="item.id">
      <el-skeleton loading="true" animated="true">
        <template #template>
          <el-card shadow="hover" :body-style="{ padding: '15px' }">
            <template #header>
              <div class="flex justify-between items-center">
                <el-skeleton-item variant="p" style="width: 50%" />
                <el-skeleton-item variant="text" style="width: 30%" />
              </div>
            </template>
            <el-skeleton-item variant="p" style="width: 50%" />
            <el-divider class="mt-2 mb-2" />
            <!-- <template #footer>Footer content</template> -->
            <div class="flex justify-between items-center">
              <el-skeleton-item variant="p" style="width: 50%" />
              <el-skeleton-item variant="text" style="width: 30%" />
            </div>
          </el-card>
        </template>
      </el-skeleton>
    </div>
  </div>

  <!-- 正常显示 -->
  <div class="flex-container" v-else>
    <div class="flex-item" v-for="item in data1" :key="item.id">
      <el-card shadow="hover" :body-style="{ padding: '15px' }">
        <template #header>
          <div class="flex justify-between items-center">
            <span>{{ item.title }}</span>
            <el-tag :type="item.unitColor || 'warning'">{{ item.unit }}</el-tag>
          </div>
        </template>
        <p class="subValue">
          <number :value="item.value"></number>
        </p>
        <el-divider class="mt-2 mb-2" />
        <!-- <template #footer>Footer content</template> -->
        <div class="flex justify-between items-center">
          <span>{{ item.subTitle }}</span>
          <span>{{ item.subValue }}</span>
        </div>
      </el-card>
    </div>
  </div>
  <!-- 第二栏 -->
  <NavList></NavList>

  <el-row :gutter="20" class="mt-5">
    <el-col :xs="12" :sm="12" :lg="12" :xl="12">
      <Echarts></Echarts>
    </el-col>

    <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
      <Card title="交易提示" tag="店铺及商品提示" :value="goods"></Card>
      <Card class="mt-5" title="交易提示" tag="需要处理订单" :value="panels"></Card>
    </el-col>
    
  </el-row>
</template>

<style scoped>
.flex-container {
  display: flex;
  justify-content: space-between;
  /* 均匀分布 */
  gap: 20px;
  /* 间隔 */
}

.flex-item {
  flex: 1 1 23%;
  /* 每个项目占据大约23%的宽度 */
  border-radius: 4px;
  min-height: 36px;
}

.subValue {
  font-size: 30px;
  font-weight: bold;
}
</style>
